<template>
<view class="quickConsultationContent">
	<view class="headerTips">
		<view class="headerTips-list">
			<image :src="`${prefix_image}/homepage/IntegralRecord/activityCheckInBg.png`" mode="aspectFill" />
			<view class="chatBox">
				<view class="text">您好，我将收集您的爱宠信息，为您推荐合适的宠物医生。</view>
			</view>
			
			
		</view>
		<view class="headerTips-list">
			<image :src="`${prefix_image}/homepage/IntegralRecord/activityCheckInBg.png`" mode="aspectFill" />
			<view class="chatBox">
				<view class="text">您的宠物是什么种类?</view>
			</view>
		</view>
	</view>
	
	<view class="quickConsultation-select">
		<view class="quickConsultation-select-title">
			请选择对应选项
		</view>
		<view class="quickConsultation-select-content">
			<view class="quickConsultation-select-content-inner">文字选项1</view>
			<view class="quickConsultation-select-content-inner">文字选项2</view>
			<view class="quickConsultation-select-content-inner">文字选项3</view>
			<view class="quickConsultation-select-content-inner">文字选项4</view>
		</view>
		
		<view class="quickConsultation-select-title">
			请选择对应选项
		</view>
		<view class="quickConsultation-select-content">
			<view class="quickConsultation-select-content-innerImg">
				<image class="image" :src="`${prefix_image}/homepage/IntegralRecord/activityCheckInBg.png`" mode="aspectFill" />
			</view>
			<view class="quickConsultation-select-content-innerImg">
				<image class="image" :src="`${prefix_image}/homepage/IntegralRecord/activityCheckInBg.png`" mode="aspectFill" />
			</view>
			<view class="quickConsultation-select-content-innerImg">
				<image class="image" :src="`${prefix_image}/homepage/IntegralRecord/activityCheckInBg.png`" mode="aspectFill" />
			</view>
		</view>
		
		<view class="quickConsultation-select-title">
			请选择对应选项
		</view>
		<view class="quickConsultation-select-content">
			<view class="quickConsultation-select-content-includeInput">
				<view class="quickConsultation-select-content-includeInput-title">
					选项1
				</view>
				<input placeholder="请输入要补充的话…" class="quickConsultation-select-content-includeInput-input" type="text" />
			</view>
			<view class="quickConsultation-select-content-includeInput">
				<view class="quickConsultation-select-content-includeInput-title">
					选项2
				</view>
				<input placeholder="请输入要补充的话…" class="quickConsultation-select-content-includeInput-input" type="text" />
			</view>
		</view>
	</view>
</view>
<guiPopup ref="popup" type="bottom" height="400" width="500" radius="6" :showCloseIcon="true">
    <view class="popup-content">
        我是里面的内容
    </view>
</guiPopup>
</template>

<script>
import { defineComponent, toRefs, reactive } from "vue"
import config from '@/hooks/useConfig.js'
import guiPopup from "@/GraceUI5/components/gui-popup.vue";
export default defineComponent({
	components: {
		guiPopup
	},
	setup() {
		const { prefix_image }=config()
		const data = reactive({
			prefix_image
		})
		return {
			...toRefs(data)
		}
	}
})
</script>

<style lang="stylus" scoped>
.quickConsultationContent{
	background: #F5F5F5;
	min-height: 100vh;
	overflow: hidden;
	
	.headerTips{
		margin: 32rpx;
		.headerTips-list{
			display: flex;
			margin-bottom: 30rpx;
			image{
				width: 80rpx;
				height: 80rpx;
				border-radius: 50%;
				
			}
			.chatBox{
				padding: 8rpx 30rpx;
				// border: 1rpx solid #ededed;
				border-radius: 5rpx;
				position: relative;
				background-color: #fff;
				flex: 1;
				margin-left: 50rpx;
				display: flex; 
				align-items: center;
				.text{
					background-color: #fff;
					
					text-align: justify;
				}
				.text:after{
					content:'';
					position:absolute;
					right:100%;
					top: 20rpx;
					width:0;
					height:0;
					border-width:10rpx;
					border-style:solid;
					border-color:transparent;
					border-right-width:16rpx;
					border-right-color:currentColor;
					color:#fff;
				}
			}
			
		}
	}
	.quickConsultation-select{
		margin: 40rpx 32rpx 0rpx 32rpx;
		.quickConsultation-select-title{
			font-size: 44rpx;
			// font-family: PingFangSC-Semibold, PingFang SC;
			font-weight: 600;
			color: #333333;
			margin-bottom: 40rpx;
		}
		.quickConsultation-select-content{
			display: flex;
			flex-wrap: wrap;
			.quickConsultation-select-content-inner{
				background-color: #fff;
				font-size: 26rpx;
				// font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #333333;
				width: 218rpx;
				height: 108rpx;
				text-align: center;
				display: flex;
				justify-content: center;
				align-items: center;
				margin-bottom: 16rpx;
				margin-right: 16rpx;
			}
			.quickConsultation-select-content-inner:nth-child(3n){
				margin-right: 0rpx;
			}
			.quickConsultation-select-content-innerImg{
				display: flex;
				margin-right:16rpx;
				margin-bottom: 16rpx;
				image{
					width: 218rpx;
					height: 218rpx;
					border-radius: 8px;
					border: 4px solid #FFD300;
					box-sizing: border-box;
				}
			}
			.quickConsultation-select-content-innerImg:nth-child(3n){
				margin-right: 0rpx;
			}
			.quickConsultation-select-content-includeInput{
				.quickConsultation-select-content-includeInput-title{
					width: 686rpx;
					height: 108rpx;
					background: #FFFDF2;
					border-radius: 54rpx;
					border: 4rpx solid #FFD300;
					text-align: center;
					display: flex;
					justify-content: center;
					align-items: center;
					margin-bottom: 24rpx;
				}
				.quickConsultation-select-content-includeInput-input{
					width: 686rpx;
					height: 108rpx;
					background: #E7E7E7;
					border-radius: 54rpx;
					
					font-size: 32rpx;
					// font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #999999;
					margin-bottom: 40rpx;
					padding-left: 32rpx;
					box-sizing: border-box;
				}
			}
		}
	}
}
	
</style>
